<template>
  <!-- main开始   start -->
        <div class="main">
            <div class="w bigmain">
                <div class="main_top">
                    <i class="iconfont icon-duigou"></i>
                    <span>商品已成功加入购物车！</span>
                </div>
                <div class="main_bootom">
                    <div class="bootom_left">
                        <img :src="sku.skuImg" alt="" width="60px" height="60px">
                        <div class="left">
                            <i>{{sku.skuName}}</i>
                            <br>
                            <p v-for="list in spuSaleAttrList" :key="list.id">{{list.saleAttrName}}：
                                <strong v-for="attrlist in list.spuSaleAttrValueList" :key="attrlist.id" v-show="attrlist.isChecked==1">
                                    {{attrlist.saleAttrValueName}}
                                </strong>
                                </p>
                                <span>数量：{{sku.skuNuber}}</span>
                        </div>
                    </div>
                    <div class="bootom_right">
                        <div>
                            <router-link :to="`/detail/${sku.id}`">查看商品详情</router-link>
                        </div>
                        <span>
                            <router-link to="/Cart"> 去购物车结算 ></router-link>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!-- main结束   end -->
</template>

<script>
export default {
    name:'addCart',
    mounted() {
    },
    computed: {
        sku(){
            // 获取sessionStorage  的 addCart数据
            return JSON.parse(sessionStorage.getItem('addCart'))
        },
        spuSaleAttrList(){
            return this.sku.spuSaleAttrList
        }
    },
}
</script>

<style scoped lang='less'>
.main{
    background-color: #f4f4f4;
    strong{
                font-weight: normal;
                margin-right: 10px;
            }
    .bigmain{
        padding: 10px 0px;
        .main_top{
            line-height: 29px;
            i{
                font-size: 28px;
                color: #6aaf04;
                vertical-align: middle;
            }
            span{
                vertical-align: middle;
                color: #6aaf04;
                font-size: 14px;
            }
            
        }
        .main_bootom{
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            font-size: 14px;
            .bootom_left{
                display: flex;
                line-height: 20px;
                .left{
                    box-sizing: border-box;
                    padding-top: 8px;
                    margin-left: 10px;
                    i{
                        float: left;
                    }
                    p{
                        float: left;
                        font-size: 12px;
                        color: #aaa;
                    }
                }
            }
            .bootom_right{
                display: flex;
                a{
                    padding: 7px 8px;
                    display: block;
                    font-size: 15px;
                    line-height: 22px;
                }
                div{
                    a{
                        color: #333;
                        background-color: #eee;
                    }
                }
                span{
                    margin-left: 5px;
                    a{
                        background-color: #e1251b;
                        color: #fff;
                    }
                }
            }
        }
    }   
}
.footer{
    margin-top: 0px;
}
</style>